<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../../../css/app.css">
    <link rel="stylesheet" type="text/css" href="../../../css/tabBar.css">
    <link rel="stylesheet" type="text/css" href="../comm/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="../comm/buy_comm.css"/>
    <link rel="stylesheet" type="text/css" href="../buy_goods/css/goods.css">
    <link rel="stylesheet" type="text/css" href="./group_goods.css">
    <style>
      .goods-info .goods-share {
        z-index: 5;
      }
      .buy-header {
        overflow: visible;
      }
      .small-font {
        font-size: 14px;
      }
      .small-font img {
        width: 15px!important;
        height: 15px!important;
      }
      .js-show {
        /*display: none;*/
      }
    </style>
    <title>极速拼团</title>
</head>

<body>
  <div class="buy-header" id="buyHeader">
      	<span class="buy-head-back" id="btn-back">
      		<img src="../../../image/shop/buy/buy-04.png"/>
      	</span>
      	<span class="buy-head-cart">
      		<img src="../../../image/shop/buy/buy-05.png"/>
          <i style="display: none" class="js-cart-count"></i>
      	</span>
        <span class="buy-head-nav">
      		<img src="../../../image/shop/buy/buy-06.png"/>
          <div class="nav-dio-top">
            <div>
              <img src="../../../image/shop/shop.png" alt="">
              <p>商城首页</p>
            </div>
            <!-- <div>
              <img src="../../../image/shop/card.png" alt="">
              <p>我的名片</p>
            </div> -->
          </div>
      	</span>
  	</div>
  	<div class="container" v-cloak>
  		<div class="swiper-container">
		    <div class="swiper-wrapper">
            <div class="swiper-slide" v-if="goodsImages.length == 0">
              <img :src="goodsInfo.cover+'?x-oss-process=image/resize,m_pad,h_100,w_100'" />
            </div>
            <div class="swiper-slide" v-if="goodsImages.length > 0" v-for="(item,index) in goodsImages" @click="showBigImg(index)">
              <img :src="item.url+'?x-oss-process=image/resize,m_lfit,w_960'" />
		        </div>
		    </div>
		    <div class="swiper-pagination dio"></div>
		</div>

    <!-- 普通商品 -->
    <div class="js-show">
      <div class="goods-price-sock" v-if="goodsInfo.tag != 1">
        <div class="goods-price">
          <!-- ￥<span>{{choicOption.sale_price}}</span> -->
          ￥<span>{{getLowPrice}}</span><span v-if="goodsOpion.length > 1">起</span>
          <!-- <i>￥{{choicOption.market_price}}</i> -->
        </div>
        <div class="stock">{{choicOption.group_num}}人拼团</div>
      </div>

      <!-- 秒杀商品 -->
      <div class="goods-price-sock" v-if="goodsInfo.tag == 1 && isNotStart" style="background:rgb(255,245,235)">
        <div class="goods-price" style="display:flex">
          <span>￥{{getLowPrice}}</span><span v-if="goodsOpion.length > 1">起</span>
          <div v-if="isNotStart">
            <!-- <i>￥{{choicOption.market_price}}</i> -->
            <i></i>
            <div class="time-count" v-cloak style="color: rgb(255,103,75)">
              {{choicOption.group_num}}人拼团
            </div>
          </div>
        </div>
        <div v-if="isNotStart" class="stock" style="color: rgb(255,103,75);font-size: 12px">抢完即止</div>
      </div>
      <!-- 秒杀中 -->
      <div class="goods-price-sock" v-if="goodsInfo.tag == 1 && (!isOver && !isNotStart)" style="background:rgb(255,245,235)">
        <div class="goods-price" style="display:flex">
          <span v-if="goodsInfo.tag != 1">￥{{getLowPrice}}</span><span v-if="goodsOpion.length > 1">起</span>
          <span v-if="goodsInfo.tag == 1">￥{{getLowKillPrice}}</span><span v-if="goodsOpion.length > 1">起</span>
          <div v-if="">
            <i>￥{{choicOption.market_price}}</i>
            <div class="time-count">
              <span v-for="i in showTime.h">{{i}}</span>:
              <span v-for="i in showTime.m">{{i}}</span>:
              <span v-for="i in showTime.s">{{i}}</span>
            </div>
          </div>
        </div>
        <div class="stock" style="color: rgb(255,103,75)">{{choicOption.group_num}}人拼团</div>
      </div>
      <!-- 秒杀结束 -->
      <div class="goods-price-sock" v-if="goodsInfo.tag == 1 && isOver" style="background:rgb(255,245,235)">
        <div class="goods-price">
          <span>￥{{getLowPrice}}</span><span v-if="goodsOpion.length > 1">起</span>
          <!-- <i>￥{{choicOption.market_price}}</i> -->
        </div>
        <div class="stock">{{choicOption.group_num}}人拼团</div>
      </div>


  		<div class="goods-info" style="z-index:5">
        <div class="title-share">
          <h2>
            {{goodsInfo.name}}
          </h2>

          <!-- <div class="goods-share" @click="showShare">
            <img src="../../../image/shop/share.png" alt="">
            <span>分享</span>
          </div> -->
        </div>
    		<p>已拼{{goodsInfo.sale_count + goodsInfo.virtual_count}} <span><img src="../../../image/shop/buy/buy-12.png"/>{{shopInfo.shop_location ? locationChange : '暂无'}}</span></p>
  		</div>
      <div class="loop-tips">
        <img :src="tipsMsg.avater" alt="">
        <span class="tips-name" v-text="tipsMsg.name">我我我我我</span>
        <span v-text="tipsMsg.msg">1秒前发起了拼团</span>
      </div>

      <ul class="goods-select-ul" :style="goodsInfo.tag != 0 ? 'margin: 0': ''">
        <li style="margin:0" v-if="goodsInfo.tag != 0 && !isOver" :style="'background:'+selectColor">
          <img v-if="goodsInfo.tag == 4" src="../../../image/shop/9.9.png" alt="9.9特卖">
          <img v-if="goodsInfo.tag == 3" src="../../../image/shop/shop_index_4.png" alt="名品打折">
          <img v-if="goodsInfo.tag == 2" src="../../../image/shop/shop_index_2.png" alt="品牌清仓">
          <img v-if="goodsInfo.tag == 1 && !isOver" src="../../../image/shop/shop_index_5.png" alt="限时秒杀">
          <span v-if="goodsInfo.tag == 4">
            <span class="active-title" :style="'color:'+selectFontColor">9块9特卖</span>
            <span class="active-text">好品大甩卖</span>
          </span>
          <span v-if="goodsInfo.tag == 3">
            <span class="active-title" :style="'color:'+selectFontColor">名品折扣</span>
            <span class="active-text">大牌名品低价购</span>
          </span>
          <span v-if="goodsInfo.tag == 2">
            <span class="active-title" :style="'color:'+selectFontColor">品牌清仓</span>
            <span class="active-text">放心品质 低价清仓</span>
          </span>
          <span v-if="goodsInfo.tag == 1 && !isOver">
            <span class="active-title" :style="'color:'+selectFontColor">限时秒杀</span>
            <span class="active-text">准时抢好品 限量不等人</span>
          </span>
        </li>
        <li class="goods-serve" @click="goodsServer" v-if="goodsInfo.seven_reason || goodsInfo.genuine || goodsInfo.speed_return" :style="'background:'+selectColor">
          <sapn class="small-font" v-if="goodsInfo.seven_reason"><img :src="selectIcon" />七天无理由</sapn>
          <sapn class="small-font" v-if="goodsInfo.genuine"><img :src="selectIcon"/>正品保证</sapn>
          <!-- <sapn class="small-font" v-if="goodsInfo.speed_return"><img :src="selectIcon"/>极速退款</sapn> -->
          <i></i>
        </li>

        <li class="goods-coupon" v-if="userInfo.team_leader_level >= 1 && (goodsInfo.commission1_rate || goodsInfo.commission2_rate)" @click="showGoodsyon">
          <span class="color9">分佣</span>
          <span>
            <u>代理专享</u><span v-if="goodsInfo.commission1_rate">一级分佣{{goodsInfo.commission1_rate}}%；</span>
            <span v-if="goodsInfo.commission2_rate">二级分佣{{goodsInfo.commission2_rate}}%；</span>
          </span>
          <i></i>
        </li>
      </ul>

  		<div class="group-number" v-if="groupList.length > 0">
  			<h2><b>{{groupList.length}}人在拼团</b><a href="javascript:void(0);" @click="groupNumberMore">查看更多</a></h2>
  			<ul>
          <li v-for="(item,index) in groupList" v-if="index < 4" style="border-bottom: 1px solid #eee;">
  					<img :src="item.avater"/>
  					<h2 v-text="item.nickname">发活动</h2>
  					<div>
  						<span>
  							<b>还差<u>{{item.less_group_num}}</u>人拼成</b><br />
  							<i>剩余<span><time-model v-bind:time="item.expire_time"></time-model></span></i>
  						</span>
  						<u @click="takePartIn(index)">拼团></u>
  					</div>
  				</li>
  			</ul>
  		</div>

      <div class="goods-shop">
        <div class="shop-msg">
          <div class="shop-avater">
            <img :src="shopInfo.shop_logo" alt="">
          </div>
          <div class="shop-msg">
            <div>
              <p v-text="shopInfo.shop_name">店铺名字</p>
              <p>
                <!-- <span>库存{{allStock}}</span> -->
                <span>已售出{{allCount}}件</span>
              </p>
            </div>
            <div class="into-shop" @click="toShop">进店逛逛</div>
          </div>
        </div>
        <div class="goods-shop-msg">
          <div class="goods-shop-msg-detail" v-for="item in goodsInfo.shop_goods" @click="toOtherGoods(item.goods_id, item.group_booking)">
            <div class="goods-img">
              <img :src="item.goods_image+'?x-oss-process=image/resize,m_lfit,w_960'" alt="">
            </div>
            <div class="goods-shop-msg-detail-goods">
              <div v-text="item.goods_name">商品标题商品标题商品标题商品标题</div>
              <p>
                <span>￥{{item.sale_price}}</span>
                <span>已售出{{item.sale_count}}件</span>
              </p>
            </div>
          </div>
        </div>
      </div>

  		<div class="goods-detail">
  			<ul class="goods-detail-tab">
  				<li :class="optionNav==1?'active':''" @click="swtichNavBottom(1)"><span>图文详情</span></li>
  				<li :class="optionNav==2?'active':''" @click="swtichNavBottom(2)"><span>产品评价</span></li>
  			</ul>
  			<div class="goods-detail-list">
  				<div class="goods-detail-imgTxt" :class="optionNav==1?'active':''" v-if="optionNav==1">
            <p v-if="!goodsInfo.description">暂无图文信息</p>
            <div v-if="goodsInfo.description" v-html="goodsInfo.description"></div>
  				</div>
  				<div class="goods-detail-comment" :class="optionNav==2?'active':''" v-if="optionNav==2">
            <p v-if="commentList.length == 0">暂无评价</p>
  					<ul>
              <li v-for="item in commentList">
  							<div>
  								<img :src="item.avater"/>
  								<h2 v-text="item.is_anony ? '匿名用户' : item.nickname">空间等级</h2>
  								<span v-text="item.date_add">2018-08-15 12:23</span>
                  <span v-if="item.score == 0" class="comment-leave">差评</span>
                  <span v-if="item.score == 1" class="comment-leave">中评</span>
                  <span v-if="item.score == 2" class="comment-leave">好评</span>
  							</div>
  							<div v-text="item.content" style="word-wrap: break-word;">
  								发货的时间开发商的开奖号房价快速的好看
  							</div>
                <div class="comment-img-list" v-if="item.images">
                  <div class="comment-img" v-for="list in item.images" @click="lookBigImg">
                    <img :src="list+'?x-oss-process=image/resize,m_lfit,w_960'" alt="评论">
                  </div>
                </div>

                <p v-if="item.reply_content">店家回复: <span>{{item.reply_content}}</span></p>
  						</li>
  					</ul>
  				</div>
  			</div>
  		</div>
  		<div class="goods-serve-detail goods-pop" ref="goodsServeDetail">
  			<div class="goods-pop-bg" @click="goodsServeDetailBg"></div>
  			<ul class="goods-pop-main">
          <li v-if="goodsInfo.seven_reason">
  					<span></span>
  					<h2>七天无理由</h2>
  					<p>
  						商家承诺7天无理由退货
  					</p>
  				</li>
  				<li v-if="goodsInfo.genuine">
  					<span></span>
  					<h2>正品保证</h2>
  					<p>
  						若收到商品是假冒产品，可获得十倍赔偿
  					</p>
  				</li>
          <!-- <li v-if="goodsInfo.speed_return">
  					<span></span>
  					<h2>极速退款</h2>
  					<p>
  						极速退款是为诚信会员提供的退款退货的专享权力，额度是根据每个用户当前的信誉评级情况而定
  					</p>
  				</li> -->
  			</ul>
  			<a href="javascript:void(0);" class="goods-pop-btn" @click="goodsServeDetailBg">确定</a>
  		</div>

      <div class="goods-serve-detail goods-pop" ref="goodsyon">
  			<div class="goods-pop-bg" @click="goodsyonBg"></div>
  			<ul class="goods-pop-main">
  				<li v-if="goodsInfo.commission1_rate">
  					<span></span>
  					<h2>一级分佣</h2>
  					<p>
  						一级分佣：{{goodsInfo.commission1_rate}}%
  					</p>
  				</li>
  				<li v-if="goodsInfo.commission2_rate">
  					<span></span>
  					<h2>二级分佣</h2>
  					<p>
  						二级分佣：{{goodsInfo.commission2_rate}}%
  					</p>
  				</li>
  			</ul>
  		</div>

  		<div class="goods-type-detail goods-pop" ref="goodsTypeDetail">
  			<div class="goods-pop-bg" @touchmove.prevent @click="goodsTypeDetailBg"></div>
  			<div class="goods-pop-main" @touchmove.prevent>
  				<div class="type-title">
  					<div class="img" @click="showBigImgs(choicOption.option_image)">
  						<img :src="choicOption.option_image"/>
  					</div>
  					<h2>¥{{isGroup ? (choicOption.group_price*goodsNumber).toFixed(2) : (choicOption.sale_price*goodsNumber).toFixed(2)}}</h2>
  					<p>库存：{{choicOption.stock}}</p>
  				</div>
  				<div class="sizeColor">
  					<h2>商品型号</h2>
  					<ul class="get-data">
  						<li @click="goodsTypeModel" v-for="(item,index) in goodsOpion" :data-goodsId="item.goods_id" :data-index="index" :data-optionId="item.id">{{item.name}}</li>
  					</ul>
  				</div>
  				<div class="plusMiuns">
  					<h2>数量</h2>
  					<div class="plus-miuns-input" ref="plusMiunsInput">
  						<a href="javascript:void(0);" :class="goodsNumber <= 1 ? 'disabled' :''" @click="plusMinusPlusMinus">-</a>
  						<input class="number-goods" type="number" name="" :value="goodsNumber" disabled />
  						<a href="javascript:void(0);" :class="goodsNumber >= choicOption.stock ? 'disabled' :''" @click="plusMinusPlus">+</a>
  					</div>
  				</div>
  				<a href="javascript:void(0);" v-if="isGroup" class="goods-pop-btn" @click="takepartInSure(1)">确定</a>
  				<div class="goods-type-btn" v-else="">
  					<a href="javascript:void(0);" @click="addTocar">加入购物车</a>
  					<a href="javascript:void(0);" @click="buyNow">立即购买</a>
  				</div>
  			</div>
  		</div>
  		<div class="group-goods-list goods-pop group-pop" ref="groupGoodsList">
  			<div class="goods-pop-bg"></div>
  			<div class="goods-pop-main">
  				<h2>所有的拼团列表</h2>
  				<ul>
  					<li v-for="(item,index) in groupList">
  						<img :src="item.avater"/>
  						<h2><b>{{item.nickname}}</b><span>剩余<time-model v-bind:time="item.expire_time"></time-model></span></h2>
  						<div>
  							还差<b>{{item.less_group_num}}</b>人<span @click="takePartIn(index)">拼团></span>
  						</div>
  					</li>
  				</ul>
  				<div class="goods-close" @click="groupNumberMoreClose">×</div>
  			</div>
  		</div>
  		<div class="group-goods-my goods-pop group-pop" ref="groupGoodsMy">
  			<div class="goods-pop-bg" @touchmove.prevent></div>
  			<div class="goods-pop-main" @touchmove.prevent>
  				<h2>参与<span>{{choicList.nickname}}</span>的拼团</h2>
  				<p>
  					仅剩{{choicList.less_group_num}}个名额，<time-model v-bind:time="choicList.expire_time"></time-model>后结束
  				</p>
  				<ul>
  					<li v-for="item in peopleGroup">
  						<img :src="item.avater"/>
              <span v-if="item.is_leader">团主</span>
  					</li>
  				</ul>
  				<a href="javascript:void(0);" @click="sponsorPartIn(1)">参与拼团</a>
  				<div class="goods-close" @click="takepartInClose">×</div>
  			</div>
  		</div>
  		<div class="group-goods-friend goods-pop group-pop">
  			<div class="goods-pop-bg"></div>
  			<div class="goods-pop-main">
  				<h2>还差<span>1</span>人，赶快邀请好友来拼团吧</h2>
  				<p>
  					拼团已发起，人满后立即发货
  				</p>
  				<ul>
  					<li>
  						<div><img src="../../../image/picture_void.png"/></div>
  						<p>微信好友</p>
  					</li>
  					<li>
  						<img src="../../../image/picture_void.png"/>
  						<p>朋友圈</p>
  					</li>
  					<li>
  						<img src="../../../image/picture_void.png"/>
  						<p>微博</p>
  					</li>
  				</ul>
  			</div>
  		</div>


  		<div class="googds-footer-nav"v-if="goodsInfo.tag != 1">
        <a href="javascript:void(0);" class="goods-nav-sell" @click="toShop">
  				<img src="../../../image/shop/to-shop.png"/><span>店铺</span>
  			</a>
  			<!-- <a href="javascript:void(0);" class="goods-nav-sell" @click="toChar">
  				<img src="../../../image/shop/buy/buy-10.png"/><span>客服</span>
  			</a> -->
        <!-- <a href="javascript:void(0);" class="goods-nav-sell">
  				<img src="../../../image/shop/buy/buy-10.png"/><span>客服</span>
  			</a> -->
  			<a href="javascript:void(0);" class="goods-nav-collect" @click="favorGoods">
  				<img :src="isCollect ? '../../../image/shop/buy/loveyou.png': '../../../image/shop/buy/buy-11.png'" />收藏
  			</a>
  			<a href="javascript:void(0);" class="goods-nav-cart" @click="goodsTypeDetail">
  				<span>¥{{goodsPrice_def}}</span>
  				<b>单独购买</b>
  			</a>
  			<a href="javascript:void(0);" class="goods-nav-buy" @click="sponsorPartIn(0)">
  				<span>¥{{groupPrice}}</span>
  				<b>发起拼团</b>
  			</a>
  		</div>

      <!-- 未开始 -->
      <div class="googds-footer-nav" v-if="goodsInfo.tag == 1 && isNotStart" v-cloak>
        <a href="javascript:void(0);" class="goods-nav-sell" @click="toShop">
  				<img src="../../../image/shop/to-shop.png"/><span>店铺</span>
  			</a>
  			<!-- <a href="javascript:void(0);" class="goods-nav-sell" @click="toChar">
  				<img src="../../../image/shop/buy/buy-10.png"/><span>客服</span>
  			</a> -->
        <a href="javascript:void(0);" class="goods-nav-sell">
  				<!-- <img src="../../../image/shop/buy/buy-10.png"/><span>客服</span> -->
  			</a>
  			<a href="javascript:void(0);" class="goods-nav-collect" @click="favorGoods">
  				<img :src="isCollect ? '../../../image/shop/buy/loveyou.png': '../../../image/shop/buy/buy-11.png'" />收藏
  			</a>
        <a href="javascript:void(0);" style="background:rgb(255,205,54);font-size: 16px;" @click="clockMe">
          {{goodsInfo.is_remind ? '已开启秒杀提醒' : timeChange}}
          <span v-if="goodsInfo.is_remind" style="font-size:10px!important;">{{goodsInfo.remind_time}}开始秒杀</span>
  			</a>
  		</div>
      <!-- 已结束 -->
      <div class="googds-footer-nav" v-if="goodsInfo.tag == 1 && isOver" v-cloak>
        <a href="javascript:void(0);" class="goods-nav-sell" @click="toShop">
  				<img src="../../../image/shop/to-shop.png"/><span>店铺</span>
  			</a>
  			<!-- <a href="javascript:void(0);" class="goods-nav-sell" @click="toChar">
  				<img src="../../../image/shop/buy/buy-10.png"/><span>客服</span>
  			</a> -->
        <a href="javascript:void(0);" class="goods-nav-sell">
  				<!-- <img src="../../../image/shop/buy/buy-10.png"/><span>客服</span> -->
  			</a>
  			<a href="javascript:void(0);" class="goods-nav-collect" @click="favorGoods">
  				<img :src="isCollect ? '../../../image/shop/buy/loveyou.png': '../../../image/shop/buy/buy-11.png'" />收藏
  			</a>
        <a href="javascript:void(0);" class="goods-nav-cart" @click="goodsTypeDetail">
  				<span>¥{{choicOption.sale_price}}</span>
  				<b>单独购买</b>
  			</a>
  			<a href="javascript:void(0);" class="goods-nav-buy" @click="sponsorPartIn(0)">
  				<span>¥{{choicOption.group_price}}</span>
  				<b>发起拼团</b>
  			</a>
  		</div>
      <!-- 秒杀中 -->
      <div class="googds-footer-nav" v-if="goodsInfo.tag == 1 && (!isOver && !isNotStart)" v-cloak>
        <a href="javascript:void(0);" class="goods-nav-sell" @click="toShop">
  				<img src="../../../image/shop/to-shop.png"/><span>店铺</span>
  			</a>
  			<!-- <a href="javascript:void(0);" class="goods-nav-sell" @click="toChar">
  				<img src="../../../image/shop/buy/buy-10.png"/><span>客服</span>
  			</a> -->
        <a href="javascript:void(0);" class="goods-nav-sell">
  				<!-- <img src="../../../image/shop/buy/buy-10.png"/><span>客服</span> -->
  			</a>
  			<a href="javascript:void(0);" class="goods-nav-collect" @click="favorGoods">
  				<img :src="isCollect ? '../../../image/shop/buy/loveyou.png': '../../../image/shop/buy/buy-11.png'" />收藏
  			</a>
        <a href="javascript:void(0);" v-if="choicOption.stock > 0" class="goods-nav-cart" @click="goodsTypeDetail">
  				<span>¥{{choicOption.sale_price}}</span>
  				<b>单独购买</b>
  			</a>
  			<a href="javascript:void(0);" v-if="choicOption.stock > 0" class="goods-nav-buy" @click="sponsorPartIn(0)">
  				<span>¥{{choicOption.kill_price}}</span>
  				<b>发起拼团</b>
  			</a>
        <a href="javascript:void(0);" v-if="choicOption.stock == 0" style="background:rgb(196,196,196);font-size: 16px;line-height: 40px;">
  				已售罄
  			</a>
  		</div>

      <div class="share-mask" v-if="shareShow" @click="hideShare" @touchmove.prevent></div>
      <div class="share-loaction" :class="shareShow ? 'show-loaction' : ''" @touchmove.prevent>
        <div class="to-where">
          <div @click="shareToWx(1)">
            <img src="../../../image/shop/buy/buy-64.png"/>
            分享给好友
          </div>
          <div @click="shareToWx(2)">
            <img src="../../../image/shop/buy/buy-63.png"/>
            分享到朋友圈
          </div>
        </div>
      </div>
      <div style="height: 60px;"></div>
    </div>
  	</div>
</body>
<script src="../../sea.js" data-main="../../main"></script>
<script type="text/javascript" src="../../vue.js"></script>
<script type="text/javascript" src="./groupGoods.js"></script>
</html>
